<template>
  <div>
    <LoadingGroup :pending="pending" :error="error" :is-empty="rows.length === 0">
      <div class="p-3">
        <UserFavaList v-for="(item, index) in rows" :key="index" :item="item" @delete="handleDeleteItem"/>
      </div>

      <div class="flex justify-center items-center mt-5 pb-10">
        <n-pagination
            size="large"
            :page="page"
            :item-count="total"
            :page-size="limit"
            :on-update:page="handlePageChange"
        />
      </div>
    </LoadingGroup>
  </div>
</template>

<script setup>
// 引入CompositionAPI
import {ref, computed, watch} from "vue";

// naive-ui
import {NPagination} from "naive-ui";
import {useMyFavaListApi, useOrderListApi} from "~/apis/user.js";

// 路由实例
const route = useRoute();

// 获取类型
const type = ref(route.query.tab || "course");

// 导航栏标题
useHead({title: "学习记录"});

// 导航栏列表
const tabs = [
  {
    label: "课堂",
    value: "course",
  },
  {
    label: "专栏",
    value: "column",
  },
];

// 点击导航栏事件
const handleClick = (t) => {
  navigateTo({
    params: {
      ...route.params,
      page: 1,
    },
    query: {
      ...route.query,
      tab: t,
    },
  });
};

const {
  page,
  limit,
  total,
  rows,
  handlePageChange,
  pending,
  error,
  refresh,
} = await usePage(({page}) => useMyFavaListApi(page));


// 删除
const handleDeleteItem = async ({goods_id, type, success, fail}) => {
  const {error} = await useUncollectApi({goods_id, type})

  if (error.value) {
    fail()
  } else {
    success()
    refresh()
  }


}
</script>
